<template>
    <div class="page-header-index-wide">
        <a-row :gutter="24">
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                <chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-area :datasource="chartData.sll" />
                    </div>
                    <template slot="footer">今日受理量：<span>{{ todaySll }}</span></template>
                </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                <chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-area :datasource="chartData.bjl"/>
                    </div>
                    <template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
                </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                <chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-bar :datasource="chartData.isll" :height="50"/>
                    </div>
                    <template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
                </chart-card>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                <chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
                    <a-tooltip title="指标说明" slot="action">
                        <a-icon type="info-circle-o" />
                    </a-tooltip>
                    <div>
                        <mini-bar :datasource="chartData.ibjl" :height="50"/>
                    </div>
                    <template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
                </chart-card>
            </a-col>
        </a-row>

        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
            <div class="salesCard">
                <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                    <div class="extra-wrapper" slot="tabBarExtraContent">
                        <div class="extra-item">
                            <a>今日</a>
                            <a>本周</a>
                            <a>本月</a>
                            <a>本年</a>
                        </div>
                        <a-range-picker :style="{width: '256px'}" />
                    </div>

                    <a-tab-pane loading="true" tab="受理监管" key="1">
                        <a-row>
                            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                                <index-bar title="受理量统计" />
                            </a-col>
                            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
                                    <div class="item-group">
                                        <a-row>
                                            <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
                                                <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </a-card>

                            </a-col>
                        </a-row>
                    </a-tab-pane>

                    <a-tab-pane tab="交互监管" key="2">
                        <a-row>
                            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                                <bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
                            </a-col>
                            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
                                    <div class="item-group">
                                        <a-row>
                                            <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
                                                <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </a-card>

                            </a-col>
                        </a-row>
                    </a-tab-pane>

                    <a-tab-pane tab="存储监管" key="4">
                        <a-row>
                            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                                <a-row>
                                    <template v-if="diskInfo && diskInfo.length>0">
                                        <a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
                                            <dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
                                        </a-col>
                                    </template>
                                </a-row>
                            </a-col>

                            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
                                    <div class="item-group">
                                        <a-row>
                                            <a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
                                                <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </a-card>

                            </a-col>
                        </a-row>
                    </a-tab-pane>

                </a-tabs>

            </div>
        </a-card>

        <a-row :gutter="12">
            <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">

                <a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                    <div class="extra-wrapper" slot="tabBarExtraContent">
                        <a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
                            <a-radio-button value="转移登记">转移登记</a-radio-button>
                            <a-radio-button value="抵押登记">抵押登记</a-radio-button>
                            <a-radio-button value="">所有</a-radio-button>
                        </a-radio-group>
                    </div>

                    <a-tab-pane loading="true" tab="业务流程限时监管" key="1">

                        <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
                            <template slot="flowRate" slot-scope="text, record, index">
                                <a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
                            </template>
                        </a-table>
                    </a-tab-pane>

                    <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
                        <a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2">
                            <template slot="flowRate" slot-scope="text, record, index">
                                <span style="color: red;">{{ record.flowRate }}小时</span>
                            </template>
                        </a-table>
                    </a-tab-pane>

                </a-tabs>

            </a-card>
        </a-row>

    </div>
</template>

<script>

import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import ChartCard from '@/components/ChartCard'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import IndexBar from '@/components/chart/IndexBar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'

const jhjgData = [
  { type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月': 1300, '8月': 900, '9月': 1000, '10月': 1200, '11月': 600, '12月': 900 },
  { type: '税务', '1月': 1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月': 900, '8月': 1100, '9月': 1300, '10月': 2000, '11月': 900, '12月': 1100 },
  { type: '不动产', '1月': 2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月': 600, '8月': 1000, '9月': 600, '10月': 1000, '11月': 1500, '12月': 1200 }
]

const jhjgFields = [
  '1月', '2月', '3月', '4月', '5月', '6月',
  '7月', '8月', '9月', '10月', '11月', '12月'
]

const xljgData = [
  { type: '一月', "房管": 1.12, "税务": 1.55, "不动产": 1.2 },
  { type: '二月', "房管": 1.65, "税务": 1.32, "不动产": 1.42 },
  { type: '三月', "房管": 1.85, "税务": 1.1, "不动产": 1.5 },

  { type: '四月', "房管": 1.33, "税务": 1.63, "不动产": 1.4 },
  { type: '五月', "房管": 1.63, "税务": 1.8, "不动产": 1.7 },
  { type: '六月', "房管": 1.85, "税务": 1.98, "不动产": 1.8 },

  { type: '七月', "房管": 1.98, "税务": 1.5, "不动产": 1.76 },
  { type: '八月', "房管": 1.48, "税务": 1.2, "不动产": 1.3 },
  { type: '九月', "房管": 1.41, "税务": 1.9, "不动产": 1.6 },

  { type: '十月', "房管": 1.1, "税务": 1.1, "不动产": 1.4 },
  { type: '十一月', "房管": 1.85, "税务": 1.6, "不动产": 1.5 },
  { type: '十二月', "房管": 1.5, "税务": 1.4, "不动产": 1.3 }
]
const xljgFields = ["房管", "税务", "不动产"]

const dataCol1 = [{
  title: '业务号',
  align: "center",
  dataIndex: 'reBizCode'
}, {
  title: '业务类型',
  align: "center",
  dataIndex: 'type'
}, {
  title: '受理人',
  align: "center",
  dataIndex: 'acceptBy'
}, {
  title: '受理时间',
  align: "center",
  dataIndex: 'acceptDate'
}, {
  title: '当前节点',
  align: "center",
  dataIndex: 'curNode'
}, {
  title: '办理时长',
  align: "center",
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}];
const dataSource1 = [
  { reBizCode: "1", type: "转移登记", acceptBy: '张三', acceptDate: "2019-01-22", curNode: "任务分派", flowRate: 60 },
  { reBizCode: "2", type: "抵押登记", acceptBy: '李四', acceptDate: "2019-01-23", curNode: "领导审核", flowRate: 30 },
  { reBizCode: "3", type: "转移登记", acceptBy: '王武', acceptDate: "2019-01-25", curNode: "任务处理", flowRate: 20 },
  { reBizCode: "4", type: "转移登记", acceptBy: '赵楼', acceptDate: "2019-11-22", curNode: "部门审核", flowRate: 80 },
  { reBizCode: "5", type: "转移登记", acceptBy: '钱就', acceptDate: "2019-12-12", curNode: "任务分派", flowRate: 90 },
  { reBizCode: "6", type: "转移登记", acceptBy: '孙吧', acceptDate: "2019-03-06", curNode: "任务处理", flowRate: 10 },
  { reBizCode: "7", type: "抵押登记", acceptBy: '周大', acceptDate: "2019-04-13", curNode: "任务分派", flowRate: 100 },
  { reBizCode: "8", type: "抵押登记", acceptBy: '吴二', acceptDate: "2019-05-09", curNode: "任务上报", flowRate: 50 },
  { reBizCode: "9", type: "抵押登记", acceptBy: '郑爽', acceptDate: "2019-07-12", curNode: "任务处理", flowRate: 63 },
  { reBizCode: "20", type: "抵押登记", acceptBy: '林有', acceptDate: "2019-12-12", curNode: "任务打回", flowRate: 59 },
  { reBizCode: "11", type: "转移登记", acceptBy: '码云', acceptDate: "2019-09-10", curNode: "任务签收", flowRate: 87 }
]

const dataCol2 = [{
  title: '业务号',
  align: "center",
  dataIndex: 'reBizCode'
}, {
  title: '受理人',
  align: "center",
  dataIndex: 'acceptBy'
}, {
  title: '发起时间',
  align: "center",
  dataIndex: 'acceptDate'
}, {
  title: '当前节点',
  align: "center",
  dataIndex: 'curNode'
}, {
  title: '超时时间',
  align: "center",
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}];
const dataSource2 = [
  { reBizCode: "A001", type: "转移登记", acceptBy: '张四', acceptDate: "2019-01-22", curNode: "任务分派", flowRate: 12 },
  { reBizCode: "A002", type: "抵押登记", acceptBy: '李吧', acceptDate: "2019-01-23", curNode: "任务签收", flowRate: 3 },
  { reBizCode: "A003", type: "转移登记", acceptBy: '王三', acceptDate: "2019-01-25", curNode: "任务处理", flowRate: 24 },
  { reBizCode: "A004", type: "转移登记", acceptBy: '赵二', acceptDate: "2019-11-22", curNode: "部门审核", flowRate: 10 },
  { reBizCode: "A005", type: "转移登记", acceptBy: '钱大', acceptDate: "2019-12-12", curNode: "任务签收", flowRate: 8 },
  { reBizCode: "A006", type: "转移登记", acceptBy: '孙就', acceptDate: "2019-03-06", curNode: "任务处理", flowRate: 10 },
  { reBizCode: "A007", type: "抵押登记", acceptBy: '周晕', acceptDate: "2019-04-13", curNode: "部门审核", flowRate: 24 },
  { reBizCode: "A008", type: "抵押登记", acceptBy: '吴有', acceptDate: "2019-05-09", curNode: "部门审核", flowRate: 30 },
  { reBizCode: "A009", type: "抵押登记", acceptBy: '郑武', acceptDate: "2019-07-12", curNode: "任务分派", flowRate: 1 },
  { reBizCode: "A0010", type: "抵押登记", acceptBy: '林爽', acceptDate: "2019-12-12", curNode: "部门审核", flowRate: 16 },
  { reBizCode: "A0011", type: "转移登记", acceptBy: '码楼', acceptDate: "2019-09-10", curNode: "部门审核", flowRate: 7 }
]

export default {
  name: "IndexBdc",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    DashChartDemo,
    BarMultid,
    IndexBar
  },
  data() {
    return {
      loading: true,
      cardCount: {
        sll: 100,
        bjl: 87,
        isll: 15,
        ibjl: 9
      },

      todaySll: 60,
      todayBjl: 54,
      todayISll: 13,
      todayIBjl: 7,

      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: []
      },
      jhjgFields,
      jhjgData,

      xljgData,
      xljgFields,

      diskInfo: [
        { name: "C盘", restPPT: 7 },
        { name: "D盘", restPPT: 5 }
      ],

      registerTypeList: [{
        text: "业务受理"
      }, {
        text: "业务管理"
      }, {
        text: "文件管理"
      }, {
        text: "信息查询"
      }],

      dataSource1: [],
      dataSource2: [],
      columns: dataCol1,
      columns2: dataCol2,
      ipagination1: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0

      },
      ipagination2: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      indexRegisterType: "转移登记",
      indexBottomTab: "1"

    }
  },
  methods: {
    goPage() {
      this.$message.success("根据业务自行处理跳转页面!")
    },
    changeRegisterType(e) {
      this.indexRegisterType = e.target.value
      if (this.indexBottomTab == "1") {
        this.loadDataSource1()
      } else {
        this.loadDataSource2()
      }
    },
    tableChange1(pagination) {
      this.ipagination1.current = pagination.current
      this.ipagination1.pageSize = pagination.pageSize
      this.queryTimeoutInfo()
    },
    tableChange2(pagination) {
      this.ipagination2.current = pagination.current
      this.ipagination2.pageSize = pagination.pageSize
      this.queryNodeTimeoutInfo()
    },
    getFlowRateNumber(value) {
      return Number(value)
    },
    getPercentFormat(value) {
      if (value == 100) {
        return "超时"
      } else {
        return value + "%"
      }
    },
    getPercentColor(value) {
      let p = Number(value)
      if (p >= 90 && p < 100) {
        return 'rgb(244, 240, 89)'
      } else if (p >= 100) {
        return 'red'
      } else {
        return 'rgb(16, 142, 233)'
      }
    },

    loadDataSource1() {
      this.dataSource1 = dataSource1.filter(item => {
        if (!this.indexRegisterType) {
          return true
        }
        return item.type == this.indexRegisterType
      })
    },
    loadDataSource2() {
      this.dataSource2 = dataSource2.filter(item => {
        if (!this.indexRegisterType) {
          return true
        }
        return item.type == this.indexRegisterType
      })
    }
  },
  created() {
    this.loadDataSource1()
    this.loadDataSource2()
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
    .extra-wrapper {
        line-height: 55px;
        padding-right: 24px;

        .extra-item {
            display: inline-block;
            margin-right: 24px;

            a {
                margin-left: 24px;
            }
        }
    }

    .item-group {
        padding: 20px 0 8px 24px;
        font-size: 0;
        a {
            color: rgba(0, 0, 0, 0.65);
            display: inline-block;
            font-size: 14px;
            margin-bottom: 13px;
            width: 25%;
        }
    }

    .item-group {
        .more-btn {
            margin-bottom: 13px;
            text-align: center;
        }
    }

    .list-content-item {
        color: rgba(0, 0, 0, .45);
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 40px;
    }

    @media only screen and (min-width: 1600px) {
        .list-content-item{
            margin-left:60px;
        }
    }

    @media only screen and (max-width: 1300px) {
        .list-content-item{
            margin-left:20px;
        }
        .width-hidden4{
            display:none
        }
    }
    .list-content-item{
        span{line-height: 20px;}
    }
    .list-content-item{
        p{margin-top: 4px;margin-bottom:0;line-height:22px;}
    }
    .anty-list-cust {
        .ant-list-item-meta{flex: 0.3 !important;}
    }
    .anty-list-cust {
        .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
    }

</style>
